import React from 'react'

export default function SuperCollectionSelect({ label, options, values, onChange, state, className }) {

  const handleChange = (option) => {
    if (values?.find(i => i.id === option.id)) {
      onChange(values.filter(i => i.id !== option.id))
    } else {
      onChange([...values, option])
    }
  }

  return (
    <div className={`flex flex-col gap-2 ${className || ''}`}>
      {label && <label className='form-label text-sm text-gray-600 mb-2'>{label}：</label>}
      <div className='text-base text-black flex flex-wrap gap-2'>
        {options?.length > 0 && options?.map((option) => (
          <div key={option.id} className='flex border border-gray-300 rounded-[20px] px-2 py-1 items-center gap-2'>
            <label className="label text-sm px-1 py-1 cursor-pointer text-black">
              <input type="checkbox" className='checkbox w-5 h-5 rounded-full border-gray-300' checked={values?.find(i => i.id === option.id) ? true : false} onChange={() => handleChange(option)} disabled={!state} />
              {option.title}
            </label>
          </div>
        ))}
      </div>
    </div>
  );
}
